<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>农产品价格分析统计</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" th:href="@{/css/me.css}">
</head>
<body>
<div class="ui grid">

  <div class="thirteen wide column" style="height: 100vh !important;">
    <!--中间内容-->
    <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
      <div class="ui container">
        <div class="ui middle aligned center aligned grid">
          <div class="column">
            <h2 class="ui teal image header">
              <div class="content">
                农产品价格分析统计
              </div>
            </h2>
            <form class="ui large form" method="get" action="#" th:action="@{/bigdisplay/index}">
              <div class="ui  segment">
                <div class="field">
                  <div class="ui fluid search selection dropdown">
                    <input type="hidden" name="province">
                    <i class="dropdown icon"></i>
                    <div class="default text">选择省份</div>
                    <div class="menu">
                      <div class="item" data-value="北京">北京</div>
                      <div class="item" data-value="上海">上海</div>
                      <div class="item" data-value="天津">天津</div>
                      <div class="item" data-value="重庆">重庆</div>
                      <div class="item" data-value="河北">河北</div>
                      <div class="item" data-value="山西">山西</div>
                      <div class="item" data-value="辽宁">辽宁</div>
                      <div class="item" data-value="吉林">吉林</div>
                      <div class="item" data-value="黑龙">黑龙江</div>
                      <div class="item" data-value="江苏">江苏</div>
                      <div class="item" data-value="浙江">浙江</div>
                      <div class="item" data-value="安徽">安徽</div>
                      <div class="item" data-value="福建">福建</div>
                      <div class="item" data-value="江西">江西</div>
                      <div class="item" data-value="山东">山东</div>
                      <div class="item" data-value="河南">河南</div>
                      <div class="item" data-value="湖北">湖北</div>
                      <div class="item" data-value="湖南">湖南</div>
                      <div class="item" data-value="广东">广东</div>
                      <div class="item" data-value="广西">广西</div>
                      <div class="item" data-value="海南">海南</div>
                      <div class="item" data-value="四川">四川</div>
                      <div class="item" data-value="贵州">贵州</div>
                      <div class="item" data-value="云南">云南</div>
                      <div class="item" data-value="西藏">西藏</div>
                      <div class="item" data-value="陕西">陕西</div>
                      <div class="item" data-value="甘肃">甘肃</div>
                      <div class="item" data-value="青海">青海</div>
                      <div class="item" data-value="宁夏">宁夏</div>
                      <div class="item" data-value="新疆">新疆</div>
                      <div class="item" data-value="台湾">台湾</div>
                      <div class="item" data-value="香港">香港</div>
                      <div class="item" data-value="澳门">澳门</div>
                    </div>
                  </div>
                </div>
                <div class="field">
                  <div class="ui fluid search selection dropdown">
                    <input type="hidden" name="year">
                    <i class="dropdown icon"></i>
                    <div class="default text">选择时间</div>
                    <div class="menu">
                      <div class="item" data-value="2018">2018</div>
                      <div class="item" data-value="2019">2019</div>
                      <div class="item" data-value="2020">2020</div>
                      <div class="item" data-value="2021">2021</div>
                    </div>
                  </div>
                </div>
                <button class="ui fluid large teal submit button">查   询</button><br>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

<script>

  $(document).ready(function() {
    $('.ui.accordion').accordion({duration:'click'});
    $('.ui.dropdown').dropdown();
    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

    $('.ui.dropdown.province')
            .dropdown({
              onChange: function(value, text, $selectedItem) {
                $('input[name=province]').val(text);
              }
            });

    $('.ui.dropdown.year')
            .dropdown({
              onChange: function(value, text, $selectedItem) {
                $('input[name=year]').val(text);
              }
            });
  });

</script>

</body>
</html>